<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>

    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">我的邀请奖励</view>
    </view>
    <view class="box_head">
      <view class="box_left">
        <image :src="userInfo.avatar_url" mode=""></image>
      </view>
      <view class="box_right">
        {{ userInfo.nick_name }}
      </view>
    </view>
    <view class="box_invite">
      <view class="invite_item">
        <view class="invite_t"> 邀请新用户 </view>
        <view class="invite_b">
          {{ num }} <text style="font-size: 24rpx">人</text>
        </view>
      </view>

      <view class="invite_item">
        <view class="invite_t"> 邀请新会员 </view>
        <view class="invite_b">
          {{ vip }} <text style="font-size: 24rpx">人</text>
        </view>
      </view>
    </view>
    <u-datetime-picker
      :show="show1"
      v-model="times"
      mode="year-month"
      @cancel="show1 = false"
      @confirm="timeConfirm"
    ></u-datetime-picker>
    <view class="box_screen">
      <view class="screen_text" @click="show1 = true">
        {{ time }}
        <u-icon
          name="arrow-down-fill"
          color="#444"
          size="10"
          style="margin-left: 8rpx"
        ></u-icon>
      </view>
      <view class="screen_text" @click="show = true">
        {{ type }}
        <u-icon
          name="arrow-down-fill"
          color="#444"
          size="10"
          style="margin-left: 8rpx"
        ></u-icon>
      </view>
    </view>
    <u-picker
      :show="show"
      :columns="columns"
      :immediateChange="true"
      @confirm="typeConfirm"
      @cancel="show = false"
      :closeOnClickOverlay="true"
    ></u-picker>

    <scroll-view
      :style="{
        height: scrollHeihgt + 'px',
      }"
      :scroll-y="true"
    >
      <view class="empty_view" v-if="list && list.length == 0">
        <image
          class="item_left_clickable"
          src="@/static/images/my/kong.png"
          mode=""
        ></image>
        <view>当前暂无数据~</view>
      </view>
      <view class="box">
        <view class="box_item" v-for="(item, index) in list">
          <view class="item_left">
            <view class="left_t"> 邀请新用户 </view>
            <view class="left_b">
              {{ item.create_time }}
            </view>
          </view>
          <view class="item_right" :class="item.type == 3 ? 'blue' : 'orange'">
            {{
              item.type == 3
                ? "优惠券"
                : item.type == 13
                ? "余额佣金"
                : "积分佣金"
            }}
          </view>
        </view>
      </view>
    </scroll-view>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import helper from "@/common/helper.js";
import { yaoqing_jiangli_list } from "@/common/api/xingzhe.js";
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      time: "",
      type: "所有",
      typeid: 0,
      show: false,
      columns: [["所有", "优惠券", "佣金积分", "佣金余额"]],
      times: 0,
      show1: false,
      scrollHeihgt: 0,
      num: 0,
      vip: 0,
      list: [],
      userInfo: {},
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".head").fields({
        size: true,
      });
      query.select(".box_screen").fields({
        size: true,
      });
      query.select(".box_head").fields({
        size: true,
      });
      query.select(".box_invite").fields({
        size: true,
      });
      query.exec((data) => {
        console.log("datadata", data);
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeihgt = windowHeihgt - sum - 75;
      });
    });
  },
  onLoad() {
    const today = helper.getTimeArr(); //获取今天
    this.time = `${today.y}年${today.m}月`;

    this.times = `${today.y}-${today.m}`;
    this.getList();
  },
  methods: {
    getList() {
      yaoqing_jiangli_list({
        type: this.typeid,
        time: this.times,
      })
        .then((res) => {
          this.num = res.data.list.people_num;
          this.vip = res.data.list.people_vip;
          console.log("rrrrrres", res);
          this.list = res.data.list.list.data;
          this.userInfo = res.data.userInfo;
        })
        .catch((err) => {});
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    typeConfirm(e) {
      console.log("eeeeeeee", e);
      this.type = e.value[0];
      this.typeid = e.indexs[0];
      this.show = false;
      this.getList();
    },
    timeConfirm(e) {
      console.log("eeee", e);
      const today = helper.djsFull(e.value); //获取今天
      console.log("todaytoday", today);
      this.time = `${today.y}年${today.m}月`;
      this.times = `${today.y}-${today.m}`;
      this.show1 = false;
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444;
  }
}

.box_head {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  margin-top: 32rpx;

  .box_left {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .box_right {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 24rpx;
    box-sizing: border-box;
  }
}

.box_invite {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 48rpx;

  .invite_item {
    width: 335rpx;
    background: #f7f8fa;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 32rpx;
    box-sizing: border-box;

    .invite_t {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #888888;
    }

    .invite_b {
      font-size: 36rpx;
      font-family: DIN, DIN;
      font-weight: 500;
      color: #444444;
      margin-top: 18rpx;
    }
  }
}

.box_screen {
  width: 100%;
  padding: 32rpx 30rpx;
  box-sizing: border-box;
  margin-top: 48rpx;
  display: flex;
  justify-content: space-between;

  .screen_text {
    display: flex;
    align-items: center;
  }
}

.box {
  width: 100%;
  background: #f7f8fa;
  padding: 0 30rpx;
  margin-top: 32rpx;
  box-sizing: border-box;

  .box_item {
    width: 100%;
    display: flex;
    background: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin-bottom: 32rpx;

    .item_left {
      flex: 1;

      .left_t {
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
      }

      .left_b {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-top: 16rpx;
      }
    }

    .item_right {
      width: 100rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
    }

    .blue {
      color: #4c9dff;
    }

    .orange {
      color: #ff8a4c;
    }
  }
}
.empty_view {
  margin-top: 100rpx;

  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }

  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>
